<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <!-- <script src="../iquery和mock模板/jquery.min.js"></script>
    <script src="../iquery和mock模板/mock-min.js"></script> -->
    <!-- <script src="./登陆注册.js"></script> -->
    <!-- <script src="./user.js"></script> -->
    <link rel="stylesheet" href="./登陆注册.css">
</head>
<body>
<!-- 弹窗-->
<div id="window">登录成功</div>
<div class="page">
    <!--注册页面-->
    <div class="reg-left" id="regx1">
        <!--圆圈-->
        <div class="circle cir-big"></div>
        <div class="circle cir-small"></div>
        <h2>Welcome Back!</h2>
        <p>已经有账号了嘛，去登录账号来进入奇妙世界吧！！！</p>
        <button id="go-login">去登录</button>
    </div>
    <div class="reg-right" id="regx2">
        <h2>注册账号</h2>
        <input type="text" placeholder="您的账号" id="username">
        <p id="shuname">账号为5-8位的小写字母</p>
        <input type="password" placeholder="您的密码" id="password">
        <p id="shupass">密码为6-16位的大小写字母、数字</p>
        <input type="password" placeholder="重复您的密码" id="confirm">
        <p id="shucon">输入密码不一致</p>
        <button id="register">注册</button>
    </div>
    <!--登录页面-->
    <div class="login-left" id="logx1">
        <h2>登录账号</h2>
        <input type="text" placeholder="您的账号" id="userd">
        <input type="password" placeholder="您的密码" id="passd">
        <div class="status">
            记住密码：<input type="checkbox" id="check">
        </div>
        <button id="login" >登录</button>
    </div>
    <div class="login-right" id="logx2">
        <!--圆圈-->
        <div class="circle cir-big"></div>
        <div class="circle cir-small"></div>
        <h2>Hello Friend!</h2>
        <p>去注册一个账号，登录系统，让我们踏入奇妙旅途！！！</p>
        <button id="go-reg">去注册</button>
    </div>
</div>
<script>

    function $(selector){
         return document.querySelector(selector)
    }
    var _gologin = $('#go-login')
    var _goreg = $('#go-reg')
    var _logx1 = $('#logx1')
    var _logx2 = $('#logx2')
    var _regx1 = $('#regx1')
    var _regx2 = $('#regx2')

    // 跳转动画
    window.onload = function () {
        animationlogin = () => {
            return (_logx1.style.left = '0',
                _logx2.style.right = '0',
                _regx1.style.left = '-380px',
                _regx2.style.right = '-580px')
        }
        _gologin.addEventListener('click', function () {
            animationlogin()
        })
        animationreg = () => {
            _logx1.style.left = '-580px'
            _logx2.style.right = '-380px'
            _regx1.style.left = '0'
            _regx2.style.right = '0'
        }
        animationreg()
        _goreg.addEventListener('click', function () {
            animationreg()
        })
    }


    // 封装弹窗
    const _window = $('#window')
    win = (con) => {
        _window.style.top = '20px'
        _window.style.opacity = '1'
        _window.innerText = con;
        setTimeout(function () {
            _window.style.top = '-50px'
            _window.style.opacity = '0'
        }, 1300)
    }

    // 注册
    const _username = $('#username')
    const _password = $('#password')
    const _confirm = $('#confirm')
    const _register = $('#register')

    // 正则
    var zzname = /^[a-z]{5,8}$/
    var zzpass = /^\w{6,16}$/

    var _shuname = $('#shuname')
    var _shupass = $('#shupass')
    var _shucon = $('#shucon')
    // 失去焦点事件
    _username.oninput = function(){
        if(zzname.test(_username.value)){
            _shuname.style.color='transparent'
        }else{
            _shuname.style.color='red'
        }
    }
    _password.oninput = function(){
        if(zzpass.test(_password.value)){
            _shupass.style.color='transparent'
        }else{
            _shupass.style.color='red'
        }
    }
    _confirm.oninput = function(){
        if(_password.value==_confirm.value){
            _shucon.style.color='transparent'
        }else{
            _shucon.style.color='red'
        }
    }


    var userarr = localStorage.getItem('users') || '[]'
    userarr = JSON.parse(userarr)
    _register.addEventListener('click', function () {
        if (_username.value == '' || _password.value == '' || _confirm.value == '') {
            win('账号、密码不能为空')
            return;
        }
        if(zzname.test(_username.value)&&zzpass.test(_password.value)&&_password.value==_confirm.value){
            var userobj = {
                username: _username.value,
                password: _password.value,
                confirm: _confirm.value
            }
            for (var i = 0; i < userarr.length; i++) {
                if (userarr[i].username == _username.value) {
                    win('账号重复')
                    return;
                }
            }
            userarr.push(userobj)
            localStorage.setItem('users', JSON.stringify(userarr))
            animationlogin()
            _username.value = ''
            _password.value = ''
            _confirm.value = ''
            win('注册成功')
        }else{
            win('输入不合法')
        }

    })



    // 登录
    const _userd = $('#userd')
    const _passd = $('#passd')
    const _login = $('#login')

    _login.addEventListener('click', function () {
        if (_userd.value == '' || _passd.value == '') {
            win('账号、密码不能为空')
            return;
        }
        var bool = false;
        for (var i = 0; i < userarr.length; i++) {
            if (_userd.value == userarr[i].username && _passd.value == userarr[i].password) {
                bool = true;
                break;
            }
        }
        if (bool) {
            win('登录成功')
            let date=new Date();
                date.setTime(date.getTime()+60*1000);
                //如果用户保持了登录状态  把username保持到cookie里面并设置有效时长
                document.cookie="username="+username+";expires="+date.toUTCString();
            setTimeout(function () {
                window.location.href = '茶首页.html'
            }, 1500)
        } else {
            win('账号或密码错误')
        }
    })
</script>
</body>
</html>